<template>
	<view class="page-check-card">
		<view v-if="errMsg" class="err-img">
			{{errMsg}}
		</view>
		
		<MxCheckCardInfo class="cmp-check-card-info" v-if="hasInfo" :info="info" :image="image" :token="token" @change="onChange" />
	</view>
</template>

<script>
	import * as membercardApi from '@/api/membercard.js'
	import MxCheckCardInfo from '@/components/mine/MxCheckCardInfo.vue';
	export default {
		components: {
			MxCheckCardInfo
		},
		data() {
			return {
				orderId: 0,
				token: null,
				errMsg: '',
				info: {},
				image: ''
			};
		},
		
		computed: {
			hasInfo() {
				return Object.keys(this.info).length > 0
			}
		},
		
		onLoad(options) {
			this.orderId = options.orderId
			this.token = options.token
			this.getCardInfo(options.orderId, options.token)
		},
		
		methods: {
			getCardInfo(orderId, token) {
				membercardApi.checkCard({orderId, token}).then(res => {
					console.log(res)
					this.info = res.data
					this.image = res.data.image.file_path
				}).catch(err => {
					console.log(err)
					this.errMsg = err.errMsg
				})
			},
			
			onChange(info) {
				this.info = info
			}
		}
	}
</script>

<style scoped lang="scss">
.page-check-card{
	padding-bottom: 100rpx;
	.cmp-check-card-info{
		display: block;
		margin: 0 auto;
	}
}
</style>
